<template>
    <ui-main>
        <template slot="header">
            <div class="ui-title pl5 pt10 pr5 pb10">本次培训结果</div>
            <div class="flex-column bg-white">
                <div class="flex row-right">
                    <a class="c-gray f14 p5" href="javascript:;" @click="$router.replace('/zxpx')">再来一次</a>
                </div>

                <div id="chart" style="height: 150px;" class="bg-white"></div>

                <div class="flex row-between pl10 pt15 pr10 pb15">
                    <div>
                        <span class="f14 c-gray">答对</span>
                        <span class="f30 c-green"> {{rightResult.questions}} </span>
                        <span class="f14 c-gray">题</span>
                    </div>
                    <div>
                        <span class="f14 c-gray">答错</span>
                        <span class="f30 c-red"> {{errorResult.questions}} </span>
                        <span class="f14 c-gray">题</span>
                    </div>
                </div>
            </div>

            <div class="ui-title pl5 pt10 pr5 pb10">历史记录</div>
        </template>

        <ui-pull @load="getListData" v-model="listData" :total="total" :num.sync="pageNumber" ref="pull">
            <van-cell v-for="(item,index) of listData" :key="index" :title="item.create_time" :value="`${item.percent} 分`"/>
        </ui-pull>
    </ui-main>
</template>

<script>
    import echart from 'echarts';
    import cy from '../mixins/cy';

    export default {
        mixins: [cy],
        data() {
            return {
                // 数据源
                // 答对的结果
                rightResult: {
                    percent: "0",
                    questions: "0"
                },
                // 答错的结果
                errorResult: {
                    percent: "0",
                    questions: "0"
                },
                // 历史记录
                listData: [],
                // 其他
                // 图表
                chart: null,
                // 图表配置
                chartOption: null,
                // 页数
                pageNumber: 1,
                // 页码
                pageSize: 20,
                // 总记录数
                total: 0,
            };
        },
        mounted() {
            this.$title('培训结果');

            this.chart = echart.init(document.getElementById('chart'));
            this.chartOption = {
                legend: {
                    show: false,
                    data: ['对', '错', ' ']
                },
                grid: {
                    show: false,
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 0
                },
                series: [
                    {
                        name: '答题',
                        type: 'pie',
                        radius: ['100%', '80%'],
                        center: ['50%', '70%'],
                        startAngle: 180,
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            color: '#1aad19',
                            position: 'center',
                            fontSize: 25,
                            formatter: ''
                        },
                        data: [
                            {value: 0, name: '对', itemStyle: {color: '#1aad19'}},
                            {value: 0, name: '错', itemStyle: {color: '#c33333'}},
                            {value: 100, name: ' ', itemStyle: {color: 'rgba(0,0,0,0)'}}
                        ]
                    }
                ]
            };

            this.$loading.open();

            this.$$trainingLastResult(this.$user.person_id).then(data => {
                if (data.content.length) {
                    // 获取答对的结果
                    let rightResult = this.$getObjFromObjArray(data.content, 'is_right', '1');
                    if (rightResult) {
                        this.rightResult = {
                            percent: rightResult.percent,
                            questions: rightResult.questions,
                        };
                    }

                    // 获取答错的结果
                    let errorResult = this.$getObjFromObjArray(data.content, 'is_right', '0');
                    if (errorResult) {
                        this.errorResult = {
                            percent: errorResult.percent,
                            questions: errorResult.questions,
                        };
                    }

                    this.chartOption.series[0].data[0].value = this.$getNumber(this.rightResult.percent);
                    this.chartOption.series[0].data[1].value = (100 - this.$getNumber(this.rightResult.percent));
                    this.chartOption.series[0].label.formatter = `${this.$getNumber(this.rightResult.percent)}分`;
                    this.chart.setOption(this.chartOption);
                }

                this.$loading.close();
            }).catch(e => {
                console.error(e);

                this.$toast('网络错误');
                this.$loading.close();
            });
        },
        methods: {
            getListData({isDownScrolling}) {
                this.$$trainingHistory({
                    person_id: this.$user.person_id,
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize
                }).then(data => {
                    this.pageNumber++;
                    this.total = data.total;

                    if (isDownScrolling) {
                        this.listData = data.content;
                    } else {
                        this.listData = [...this.listData, ...data.content];
                    }

                    this.$refs.pull && this.$refs.pull.endSuccess();
                }).catch(e => {
                    console.error(e);

                    this.$refs.pull && this.$refs.pull.endSuccess();
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../assets/css/varible';
</style>
